<template>
  <div>
      <div class="Main">
    <a-form-model :model="formInline" @submit="handleSubmit" @submit.native.prevent>
    <a-form-model-item class="title">登录</a-form-model-item>
    <a-form-model-item>
      <a-input v-model="formInline.user" placeholder="Username">
        <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
      </a-input>
    </a-form-model-item>
    <a-form-model-item>
      <a-input v-model="formInline.password" type="password" placeholder="Password">
        <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
      </a-input>
    </a-form-model-item>
    <a-form-model-item>
      <a-button
        type="primary"
        html-type="submit"
        :disabled="formInline.user === '' || formInline.password === ''"
      >
        Log in
      </a-button>
    </a-form-model-item>
  </a-form-model>
      </div>
    
  </div>
</template>
<script>

import { message } from 'ant-design-vue';
export default {
  data() {
    return {
      formInline: {
        user: 'admin',
        password: 'admin',
      },
    };
  },
  methods: {
    handleSubmit(e) {
      this.$axios({
          method:"post",
          url:"/login",
          data:{
            username:this.formInline.user,
            password:this.formInline.password
          }
      }).then(res =>{
          if(res.data.code === 200){
              window.sessionStorage.clear()
              if(res.data.token){
                window.sessionStorage.setItem("token",res.data.token)
              }
              window.sessionStorage.setItem('username',res.data.data.username)
              this.$router.push('/')
              message.info('登陆成功！')
          }else{
              message.error("登陆失败！")
          }
      })
    },
  },
};
</script>

<style scoped>
.title{
    font-weight: bolder;
    font-size: 30px;
}
.Main{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    text-align: center;
}
</style>
